import * as React from 'react';
import {Text, View, StyleSheet, Image, ImageBackground} from 'react-native';
import Images from '../../images/images';
import Container from '../../components/Container';
import screen from '../../utils/screen';
import {useToast} from '../../components/toast/useToast';
import {useDialog} from '../../components/dialog/useDialog';
import TouchableView from '../../components/touchableView';
import Progress from '../../components/progress';
import {useNavigation} from '@react-navigation/native';
import {useAppStore} from '../../store/useAppStore';

const progressW = (screen.width-screen.PIXEL_80 ) /2 - screen.PIXEL_40
const Mine = ()=>{

    const navigation = useNavigation()
    const toast = useToast()
    const dialog = useDialog()

    const {appState:{currentDevice}} = useAppStore()

    const renderModuleItem = (icon,title,onPress)=>{

        return (
            <TouchableView
                style={styles.moduleItem}
                onPress={()=>{
                    onPress()
                }}
            >
                <View style={{flexDirection:'row',alignItems:'center'}}>
                    <Image style={{width:screen.PIXEL_30,height:screen.PIXEL_30}} source={icon} resizeMode={'contain'}/>
                    <Text style={{fontSize:screen.PIXEL_28,color:'#333',marginLeft:screen.PIXEL_20}}>{title}</Text>
                </View>
                <Image style={{width:screen.PIXEL_20,height:screen.PIXEL_20}} source={Images.right2} resizeMode={'contain'}/>
            </TouchableView>
        )
    }

    return (
        <Container style={styles.container}>
            <View style={styles.head}>
                <View style={{flexDirection:'row',alignItems:'center'}}>
                    <TouchableView
                        onPress={()=>{
                            toast.show('本页内容仅作演示，不代表最终效果')
                        }}
                    >
                        <Image source={Images.avatar} style={styles.headImg} resizeMode={'contain'}/>

                    </TouchableView>
                    <View style={styles.nameWrap}>
                        <Text style={styles.nameText}>138****1223</Text>
                        <ImageBackground
                            source={Images.vip_tag_bg}
                            style={styles.vipBg}
                        >
                            <Text style={{color:'#F7A81A',fontSize:screen.PIXEL_20}}>钻石用户</Text>
                        </ImageBackground>
                    </View>
                </View>
                <Image source={Images.right} style={styles.rightImg} resizeMode={'contain'}/>
            </View>
            {/*
            <View style={{flexDirection:'row',marginTop:screen.PIXEL_30}}>
                <TouchableView
                    style={styles.restMsgBg}
                    onPress={()=>{
                        toast.show('本页内容仅作演示，不代表最终效果')
                    }}
                >
                    <Image source={Images.rest_message}
                           style={styles.restImg}
                    />
                    <TouchableView style={{alignSelf:'flex-end',padding:screen.PIXEL_30}}>
                        <Image source={Images.refresh2} resizeMode={'contain'} style={{width:screen.PIXEL_30,height:screen.PIXEL_30}}/>
                    </TouchableView>

                    <View>

                        <Progress progress={0.5} style={{width:progressW,height:screen.PIXEL_50}}/>
                        <Text style={{color:'#0D80FC',fontSize:24,fontWeight:'bold',marginTop:screen.PIXEL_30}}>120
                            <Text style={{color:'#7DBAFF',fontSize:16}}>/20</Text>
                        </Text>
                        <Text style={{color:'#333',fontSize:screen.PIXEL_24,marginTop:screen.PIXEL_20}}>剩余短信/已使用(条）</Text>
                    </View>


                </TouchableView>

                <View style={{flex:1}}>
                    <TouchableView
                        onPress={()=>{
                            toast.show('本页内容仅作演示，不代表最终效果')
                        }}
                        style={{flex:1,backgroundColor:'#F7EBE1',borderRadius:screen.PIXEL_20}}
                    >
                        <Image source={Images.balance}
                               style={styles.balanceImg}
                        />
                        <View style={{position:'absolute',left:screen.PIXEL_30,top:0,bottom:0,justifyContent:'center'}}>
                            <Text style={{color:'#333',fontSize:18,fontWeight:'bold'}}>120</Text>
                            <Text style={{color:'#333',fontSize:screen.PIXEL_24,marginTop:screen.PIXEL_10}}>账户余额(元)</Text>

                        </View>

                        <Text style={styles.rechargeText}>充值</Text>

                    </TouchableView>

                    <TouchableView
                        style={{flex:1,marginTop:screen.PIXEL_20,backgroundColor:'#DCEDE1',borderRadius:screen.PIXEL_20}}
                        onPress={()=>{
                            toast.show('本页内容仅作演示，不代表最终效果')
                        }}
                    >
                        <Image source={Images.bind_device}
                               style={styles.bindImg}
                        />
                        <View style={{position:'absolute',left:screen.PIXEL_30,top:0,bottom:0,justifyContent:'center'}}>
                            <Text style={{color:'#333',fontSize:18,fontWeight:'bold'}}>1</Text>
                            <Text style={{color:'#333',fontSize:screen.PIXEL_24,marginTop:screen.PIXEL_10}}>绑定设备(台)</Text>

                        </View>

                        <Text style={styles.rechargeText}>详情</Text>
                    </TouchableView>
                </View>
            </View>
            */}

            {
                renderModuleItem(Images.contact,'联系人',()=>{
                    if(currentDevice){
                        navigation.navigate('Contact',{data:currentDevice })
                    }else{

                    }

                })
            }

            {
                renderModuleItem(Images.message,'短息模板库',()=>{
                    if(currentDevice){
                        navigation.navigate('Template',{data:currentDevice })
                    }else{

                    }
                })
            }

            {
                renderModuleItem(Images.custom_service,'联系客服',()=>{
                    toast.show('本页内容仅作演示，不代表最终效果')
                    return
                })
            }

            {
                renderModuleItem(Images.update,'检查更新',()=>{
                    toast.show('本页内容仅作演示，不代表最终效果')
                    return
                })
            }

           {/* <Image source={Images.wait} style={styles.waitImg} resizeMode={'contain'}/>
            <Text style={styles.waitText}
                  onPress={()=>{
                      dialog.alert('这是个测试标题')
                  }}
            >敬请期待!</Text>
            */}
        </Container>
    )
}
export default Mine

const styles = StyleSheet.create({
    container:{
        // justifyContent: 'center', alignItems: 'center'
        paddingHorizontal:screen.PIXEL_30
    },
    head:{
      flexDirection:'row',justifyContent: 'space-between',alignItems:'center'
    },

    headImg:{
        width:screen.scaleSize(124),height:screen.scaleSize(124)
    },
    rightImg:{
        width:screen.PIXEL_50,height:screen.PIXEL_50
    },
    nameWrap:{
        marginLeft:screen.PIXEL_16
    },
    nameText:{
        fontSize: 16,color:'#333',fontWeight:'500'
    },
    vipBg:{
        width:screen.PIXEL_150,height:screen.PIXEL_40,justifyContent: 'center',
        paddingLeft:screen.PIXEL_50,marginTop:screen.PIXEL_10
    },
    waitImg:{
        width:screen.PIXEL_240,height:screen.PIXEL_240
    },
    waitText:{
        color:'#89A3BB',fontSize:14,marginTop:screen.PIXEL_50
    },
    restMsgBg:{
        flex:1,marginRight:screen.PIXEL_20,height:screen.PIXEL_320,
        backgroundColor:'#DAEBFE',borderRadius:screen.PIXEL_20,alignItems: 'center'
    },
    restImg:{
        position:'absolute',right:0,bottom:screen.PIXEL_10,width:screen.PIXEL_120,height:screen.PIXEL_120 * ( 144 / 132)
    },
    balanceImg:{
        position:'absolute',right:0,bottom:0,width:screen.PIXEL_120,height:screen.PIXEL_120 * (80/113)
    },
    bindImg:{
        position:'absolute',right:0,bottom:0,width:screen.PIXEL_120,height:screen.PIXEL_120 * (80/ 113)
    },
    rechargeText:{
        color:'#0D80FC',fontSize:12,fontWeight:'bold',position:'absolute',right:screen.PIXEL_30,top:screen.PIXEL_30
    },
    moduleItem:{
        marginTop:screen.PIXEL_30,backgroundColor: '#fff',flexDirection: 'row',paddingHorizontal: screen.PIXEL_30,
        alignItems:'center',height:screen.PIXEL_90,borderRadius: screen.PIXEL_20,justifyContent:'space-between'
    }
})
